<template>
  <div class='ele-body ele-body-card'>
    <a-card
      :bordered='true'
      :body-style="{padding: '20px'}">
      <a-form
        ref='form'
        :model='form'
        :rules='rules'
        :label-col='{ md: { span: 10 }, sm: { span: 24 } }'
        :wrapper-col='{ md: { span: 14 }, sm: { span: 24 } }'
        @submit='save'
      >
        <a-row :gutter='8'>
          <a-col :md='12' :sm='24' :xs='24'>
            <a-form-item label='维修检测机制' name='repair_check_enable'>
              <a-select style="width: 80%" v-model:value="form.repair_check_enable">
                <a-select-option :value="0">不开启</a-select-option>
                <a-select-option :value="1">开启</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="维修检测机制处理方式:" name="repair_unrecovery_handle">
              <a-select style="width: 80%" v-model:value="form.repair_unrecovery_handle">
                <a-select-option :value="0">不处理</a-select-option>
                <a-select-option :value="1">仅告警</a-select-option>
                <a-select-option :value="2">仅恢复</a-select-option>
                <a-select-option :value="3">告警且恢复</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label='维修多久未恢复:' name='repair_warn_time'>
              <a-input style="width: 80%" v-model:value='form.repair_warn_time' placeholder='' allow-clear />
              <a-alert message="维修状态打开后，多久未关闭会告警;0不限制,>1进行告警(分钟)" style="margin-top:5px;font-size: 11px;padding:2px 3px;width: 80%" type="info" show-icon />
            </a-form-item>
            <a-form-item label='维修多久自动恢复:' name='repair_restored_time'>
              <a-input style="width: 80%" v-model:value='form.repair_restored_time' placeholder='' allow-clear />
              <a-alert message="维修状态打开后，多久未关闭会自动恢复;0不限制,>1进行自动恢复(分钟)" style="margin-top:5px;font-size: 11px;padding:2px 3px;width: 80%" type="info" show-icon />
            </a-form-item>
          </a-col>
          <a-col :md='12' :sm='24' :xs='24' />
        </a-row>
        <a-row>
          <a-col :md='1' :sm='24' :xs='24' />

          <a-col :md='2' :sm='24' :xs='24'>
            <a-form-item :wrapper-col='{ span: 12, offset: 5 }'>
              <a-button v-permission="['PROPERTY_DEVICELIST_MGR_DRINKHEARTING_SETTING_SAVE_BUTTON']" type='primary' html-type='submit'>
                保存
              </a-button>
            </a-form-item>
          </a-col>
          <a-col :md='8' :sm='24' :xs='24' />
          <a-col :md='13' :sm='24' :xs='24' />
        </a-row>
      </a-form>
    </a-card>
  </div>
</template>

<script>
import { message } from 'ant-design-vue';
import {DeviceDrinkheatingSettingApi} from "@/api/property/drinkhearting/DeviceDrinkheatingSettingApi";

export default {
  name: 'DeviceDrinkheartingSetting',
  components: {

  },
  props: {
    data: Object
  },
  async mounted() {
  },
  async created() {
    await this.init();
  },
  data() {
    return {
      form: {},
      rules: {}
    };
  },
  methods: {
    async init() {
      let _conf = await DeviceDrinkheatingSettingApi.detail({ 'recordId': this.data.recordId });
      this.form = (_conf && _conf.repairCheckConfig) ? (JSON.parse(_conf.repairCheckConfig) || {}) : {};
    },
    /**
     * 保存和编辑
     * 写到队列，队列发送完回写到原配置
     * @author cancan
     * @date 2022/03/04 21:15
     */
    save() {
      // 校验表单
      //await this.$refs.form.validate();

      // 修改加载框为正在加载
      let that = this;
      this.loading = true;
      let updateDataRecord = {
        recordId: this.data.recordId,
        repairCheckConfig : JSON.stringify(this.form),
      };

      let result = DeviceDrinkheatingSettingApi.edit(updateDataRecord);
      result
        .then(result => {
          // 移除加载框
          that.loading = false;
          // 提示添加成功
          message.success('保存成功');
          that.init();
        })
        .catch(() => {
          that.loading = false;
        });
    }
  }
};
</script>
<style scoped>
/** 用户卡片 */
.workplace-user-card .ele-cell-content {
  overflow: hidden;
}

.workplace-user-card h4 {
  margin-bottom: 6px;
}
</style>
